<template>
	<view class="page">
		<view class="upper">
			<commonNavBar title="文书制作"  >
				<template v-slot:right>
					<text class="right-text" @tap="showDayCheckType">文书帮办</text>
				</template>
			</commonNavBar>
		</view>
		<view class="input-box">
			<view class="input-item" v-for="(input , index) in  documentTemplateList">
				<text class="input-title">{{input.name}}：</text>
				<view class="input-value">
					<image  v-if="input.type == '2'" @tap="sign(index)" :src="input.value == '' ? '/static/img/sing.png':input.value"  class="input-image"  ></image>   
					<textarea maxlength="2000" v-if="input.type == '1' && (input.name == '案由' || input.name =='违反内容')" :name="input.name" class="textarea" placeholder-class="placeholder-style" v-model="causeOfActionValue" @tap="editInfo( index,input)" ></textarea>
					<textarea maxlength="2000" v-else-if="input.type == '1'" :name="input.name" class="textarea" placeholder-class="placeholder-style" v-model="input.value"  @tap="editInfo( index,input)" ></textarea>
					<picker v-if="input.type == '3'"  mode = "date"  class="input" :value="input.value" @change="dateChange($event,index)" ><input   :name="input.name" class="input" placeholder-class="placeholder-style" v-model="input.value"  @tap="editInfo( index,input)"  /></picker>
				</view>
				<view class="input-right" @tap="deputy(input.code)">
					<text class="input-right-btn-text" >字段帮办</text>
				</view>
			</view>
		</view>
		<view class="fixed"  >
			<button class="determine" @click="configrmDoc">提交</button>
			<button class="cancellation" @click="goBack">取消</button>
		</view> 
		<!-- 填写案由 -->
		<uni-popup  ref="dayCheckType" type="center" >
			<view class="mainPointsOfACase">
				<view class="title">案由/违反内容</view>
				<view class="box"> 
					<textarea maxlength="2000" class="text-area" v-model="causeOfActionValue" placeholder="请填写案由信息"></textarea>
					<view class="button"> 
						<button @click="documentHelp()">文书帮办</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 填写内容 -->
		<uni-popup  ref="inputContentPop" type="center" >
			<view class="mainPointsOfACase">
				<view class="title">填写内容</view> 
				<view class="box"> 
					<textarea maxlength="2000" class="text-area" v-model="inputObj.value"  placeholder="请填写内容"></textarea>
					<view class="button"> 
						<button @click="saveInput()">确认</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonNavBar from '@/components/CommonNavBar.vue';
	 
	export default {
		components:{
			commonNavBar
		},
		data() {
			return {
				basrUrl: uni.$baseUrl,
				investigationId:null,
				title :null,
				type :null,
				templateId :null,
				documentTemplateList:[],
				causeOfActionValue: '',
				inputIndex:null,
				inputObj:{
					value:''
				}
			}
		}, 
		onLoad(options) { 
			this.investigationId = options.investigationId
			this.type = options.type
			this.title = options.title
			this.templateId = options.id
		},
		onReady() {
			this.initData();
			//弹出案由弹窗
			this.$refs.dayCheckType.open();
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			checkSign(value){
				if(value == 'supervise1_sign' || value == 'supervise2_sign' || value == 'company_sign' ){
					return true;
				} else {
					return false;
				}
			}, 
			async  initData(){
				uni.showLoading({
					title:'加载模板内容',
					mask: true
				})
				//获取页面数据
				let res = await uni.$api.getTemplateInputList({
					 templateId : this.templateId,
					 investigationId : this.investigationId
				});
				uni.hideLoading()
				this.documentTemplateList = res.data.data;
			},
			configrmDoc(){ 
				const that = this;
				//生成文档 
				uni.navigateTo({
					url:'/pages/investigation/document/generateDocument',
					events:{
						updateImage(data){ 
							const eventChannel = that.getOpenerEventChannel();
							eventChannel.emit('updateImage', data); 
						}
					},
					success: (res) => { 
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('documentTemplateList', { documentTemplateList: that.documentTemplateList,
						templateId: that.templateId ,
						type: that.type ,
						investigationId: that.investigationId })
						that.$refs.dayCheckType.close();
					}
				})
			},
			dateChange(event,index){ 
				this.$set(this.documentTemplateList[index],'value',event.detail.value.split('-')[0]+'年'+event.detail.value.split('-')[1]+'月'+event.detail.value.split('-')[2]+'日');
			},
			sign(index){
				const that =this;
				//签名
				 uni.navigateTo({
				 	url:'/pages/signature/signature',
					events:{
						updateSign(data){ 
							that.$set(that.documentTemplateList[index],'value',data);
							 
						}
					}
				 })
			},
			async deputy(code){
				//字段帮办
				const that =this;
				//签名
				 uni.navigateTo({
				 	url:'/pages/investigation/document/docFieldDeputy?code='+code+"&investigationId="+this.investigationId+"&templateId="+this.templateId,
				 })
			},
			documentHelp(){
				const that = this;
				//文书帮办
				if(this.causeOfActionValue != '') {
					uni.navigateTo({
						url:'/pages/investigation/document/documentHelp?investigationId='+this.investigationId+"&templateId="+this.templateId+"&causeOfActionValue="+this.causeOfActionValue,
						events: {
							// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
							inputContent: function(data) { 
							  for (var i = 0; i < that.documentTemplateList.length; i++) {
							  	if(that.documentTemplateList[i].code == 'according_content'){
									that.$set(that.documentTemplateList[i],'value',data.cfyj);
								}
							  	if(that.documentTemplateList[i].code == 'education_content'){
									that.$set(that.documentTemplateList[i],'value',data.cfnr);
								}
							  }
							  	
							}, 
						} 
					})
				}else {
					uni.showToast({
						title: '请输入案由',
						icon: 'error'
					})
				}
			},
			showDayCheckType(){
				this.$refs.dayCheckType.open();
			},
			editInfo(index , input){//点击输入框使用放大的弹窗进行编辑
				
				this.inputIndex = index;
				if(input.name == '案由' || input.name =='违反内容'){
					this.inputObj.value  = this.causeOfActionValue;
				} else {
					this.inputObj = input;
				}; 
				this.$refs.inputContentPop.open();
			},
			saveInput(){
				//保存输入内容到输入框 
				this.$set(this.documentTemplateList[this.inputIndex],"value",this.inputObj.value)
				this.$refs.inputContentPop.close();
			}
		}
	}
</script>

<style  lang="scss">
	.page {
		background: #F9F9F9;
	}
	.title-text{
		color: #ffffff;
	}
	.upper {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;

		.title {
			background-image: url('/static/img/inspectBg.png');
			background-size: cover;
			width: 100%;
			height: 115rpx;
			line-height: 115rpx;
			position: relative;
			display: flex;
			justify-content: center;

			.arrow {
				position: absolute;
				left: 33rpx;
				top: 50%;
				transform: translate(0%, -50%);
				width: 100rpx;
				height: 100rpx;

				&::before {
					display: block;
					content: "";
					position: absolute;
					top: 50%;
					left: 0%;
					width: 20rpx;
					height: 20rpx;
					border-left: 1px solid #fff;
					border-top: 1px solid #fff;
					transform: translate(0%, -50%) rotate(-45deg);
				}
			}

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				letter-spacing: 1px;
			}

			
		}
	}
	.input-box{
		padding-top: 115rpx;
		padding-bottom: 100px;
	}
	.input-item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		padding: 40rpx 28rpx;
	}
	.input-title{
		font-size: 20rpx;
		color: #616161;
		width: 120rpx;
	}
	.input-value{
		font-size: 24rpx;
		color: #7e7e7e;
		width: 400rpx;
		border-bottom: 1px solid  #e8e8e8;
		
		input {
			font-size: 24rpx;
		}
	}
	.input{
		width: 400rpx;
		margin: 0 auto 16rpx;
		// height: 40px;
	}
	.placeholder-style{
		color: #ececec;
	}
	.input-image{
		width: 100rpx;
		height: 100rpx;
	}
	
	.fixed {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 92rpx;
		background: #fff;
		padding: 0 95rpx 24rpx 95rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		width: calc(100% - 190rpx);
	}
	.determine {
		color: #fff;
		width: 269rpx;
		height: 55rpx;
		line-height: 55rpx;
		background: #0552A9;
		border-radius: 10rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
			
	.cancellation {
		background: none;
		border: 1rpx solid #979797;
		color: #979797; 
		width: 269rpx;
		height: 55rpx;
		line-height: 55rpx; 
		border-radius: 10rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
	.input-right{
		width: 90rpx; 
		height: 50rpx;
		line-height: 50rpx;
		// line-height: 1;
		background-color: #007AFF;
		border-radius: 12rpx;
		border: 0px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	} 
	.input-right-btn-text{
		font-size:18rpx;
		color: #ffffff;
	}
	.right-text{
		font-size: 25rpx;
		color: #ffffff;
		text-align: right;
		line-height: inherit;
	}
	.screen {
		position: absolute;
		text-align: right;
		right: 20rpx; 
		top: 50%;
		transform: translate(0%, -50%);
		// width: 100px;
	}
	 
	.mainPointsOfACase {
		background: #FFFFFF;
		border-radius: 20rpx;
		.title {
				border-radius: 20rpx 20rpx 0 0;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				background: url('/static/img/popupTitle.png') no-repeat center center;
				background-size: cover;
				font-size: 25rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				// text-indent: 45rpx;
				text-align: center;
		}
	
		.box {
			padding: 10rpx 10rpx 10rpx 10rpx;
			border-radius: 0 0 20rpx 20rpx ;
			
	
			.button {
				margin: 58rpx auto 0;
				padding: 0 95rpx 24rpx 95rpx;
				display: flex;
	
				button {
					width: 269rpx;
					height: 55rpx;
					line-height: 55rpx;
					background: #0552A9;
					border-radius: 10rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #fff; 
				}
			}
		}
	}
	
	.text-area{
		padding: 10rpx;
		border:  1px solid #e7e7e7;
		border-radius: 4rpx;
	}
	
	.textarea{
		min-height: 60rpx;
		overflow-wrap: break-word;
		height: auto;
		width: 100%;
	}
</style>
